<template>

    <view class="orderPage allPage">
        <view class="headNav">
            <view class="ul">
                <view v-for="item,idx in titleNav" :key="idx" class="li " :class="{'active': idx == navIdx }" @click='switchTit(idx)'>{{item.name}}</view>
            </view>
        </view>

        <!-- //列表 -->
        <view class="list-box">
            <view v-for="itemMo,idx in  listData " :key="idx">
                <view class="selectList show" v-for="item,idx in  itemMo " :key="item.id"  @click="viewPic(item)">

                    <view class="info">
                        <view class="time text-delic2">
                            <text class="col" v-if="item.status == 1" >
                                待打款
                            </text>
                            <text class="col-green" v-else-if="item.status == 1" >
                                已打款
                            </text>
                            <text class="col-red" v-else="item.status == 1" >
                                已驳回
                            </text>
                        </view>
                        <view class="time text-delic2">
                            <text class="">
                                {{ item.createTime }}
                            </text>
                        </view>
                        <view class="time text-delic2">
                            <text class="">
                                {{ item.supermarketName }}
                            </text>
                        </view>
                        <view class="bottom">

                            <text class="col-green price">
                              <text class="f18">￥</text>  {{item.money  }}
                            </text>

                        </view>
                    </view>
                    <view class="mt5 col-hui">
                        <view>
                            <span class=""> {{item.type == 1 ? '微信' : item.type == 2 ? '支付宝' : item.type == 3 ? '银行卡' : '--' }} </span>
                            <span>{{item.withdrawalAccount}}</span>

                            <span  v-if="item.picture" class="fr">预览</span>
                        </view>
                          
                    </view>
                      

                </view>
            </view>
            <view class="nolist" v-if="showNodata && total == 0">
                暂未查询到相关记录
            </view>
        </view>
    </view>

</template>
<script>

const app = getApp();
export default {
    components: {},
    data () {
        return {

            titleNav: [
                { name: "全部", code: [] },
                { name: "待打款 ", code: [1] },
                { name: "已打款", code: [2] },
                { name: "已驳回", code:[3] }
            ],
            navIdx: 0,
         
            listData: [],

            totalPage: 0,  //总页数
            showNodata: false,
            queryForm: {
                pageNum: 1, //第几页
                pageSize: 5,
                statusList:undefined
            },
            total: 0,
        
        }
    },
    onLoad( option ) {

        let index = 0 

        if(option.status){
            
            this.titleNav.map( (item,idx)=>{

                if( item.code[0] == option.status){
                    index = idx
                }

            })
        }

        this.navIdx = index

        this.queryForm.statusList = this.titleNav[index].code

        this.initPage()

    },
    methods: {
        initPage (cb) {
            this.$axios({ url: 'flash/supermarket/withdrawal/log/page/list?loading', data: this.queryForm })
                .then(res => {

                    console.log('哈哈哈哈', res)

                    this.$set(this.listData, this.queryForm.pageNum - 1, res.data )

                    this.total = res.total

                    this.showNodata = true

                    cb && cb()
                })
        },
        switchTit (i) {

            if (i != this.navIdx) {

                this.navIdx = i

                uni.pageScrollTo({
                    scrollTop: 0,
                    duration: 10
                });

                this.queryForm.pageNum = 1
                this.queryForm.statusList = this.titleNav[i].code


                this.initPage()
            }
        },

     
        //下拉刷新
        onPullDownRefresh () {

            this.queryForm.pageNum = 1


            this.initPage(() => {
                uni.stopPullDownRefresh();//停止刷新
            })

        },
        onReachBottom () {
            console.log('触底了')

            if (this.queryForm.pageNum * this.queryForm.pageSize < this.total) {

                this.queryForm.pageNum += 1

                this.initPage()
            }

        },
        goDetail (row) {
            this.$goNext('./order-detail?id=' + row.id)
        },
        //预览
        viewPic( row ){

            if(!row.picture) return

            // console.log('胜多负少士大夫士大夫山东巡抚先吃饭v阿斯蒂芬',row)

            const urls = [ this.$getImg( row.picture , 1) ]
            const current = 0

            uni.previewImage({
                urls,
                current
            })
			
        },

    }
}
</script>
<style lang="scss" scoped>
.allPage{
    background: #fff;
}
.headNav {
    height: 80rpx;
    width: 100%;
}
.headNav .ul {
    display: flex;
    position: fixed;
    height: 80rpx;
    line-height: 80rpx;
    background: #fff;
    margin-bottom: 20rpx;
    box-sizing: border-box;
    padding: 0 24rpx;
    left: 0;
    top: 0;
    width: 100%;
    background: #ffffff;
    z-index: 10;
    border-bottom: 2rpx solid #eaeaea;
}
.headNav .li {
    margin: 0 20rpx;
    height: 100%;
    border-bottom: 4rpx solid #fff;
    text-align: center;
    box-sizing: border-box;
    font-size: 28rpx;
    transition: all 0.3s;
}

.headNav .active {
    color: #1989fa;
    border-bottom: 4rpx solid #1989fa;
}

.list-box {
    padding: 20rpx 32rpx 60rpx;
}

.nolist {
    margin-top: 100rpx;
    text-align: center;
    font-size: 28rpx;
    color: #565656;
}

/* //新增搜索框 */
.brandName {
    background-color: #ffffff;
    padding: 20rpx 0;
}
.brandKeyWord,
.brandKeyWord .p,
.brandName .brandHead {
    height: 64rpx;
    line-height: 64rpx;
}
.brandName image {
    margin-top: 15rpx;
}
/* //公共部分 */
.common-box {
    overflow: hidden;
}
.common-box image {
    float: left;
    width: 160rpx;
    height: 140rpx;
    text-align: center;
    line-height: 60px;
    border: 1px solid #eee;
    overflow: hidden;
    margin-right: 30rpx;
}
// **************************************************************************************************.active
/* //弹出选中明细 */
.selectList {
    box-sizing: border-box;
    width: 100%;
    z-index: 12;
    padding: 10px 0px 14px;
    // background: #fff;
    font-size: 12px;
    transition: all 0.4s;
    margin-bottom: 32rpx;
    border-radius: 6px;
    border-bottom:1rpx solid #eaeaea ;
    // box-shadow: 0 0 4px #eaeaea;

    .info{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .price{
        font-size: 30rpx;
    }
    
}

</style>